<template>
   <div class="header">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="$router.push('/setup')"
      color="#f6f6f6">

      <template #left>
        <van-icon name="arrow-left"  @click="$router.go(-1)" color="#262626" size="30px"/>
        </template>
    </van-nav-bar>
    <form action="" @submit.prevent="onSubmit" >
      <h5>Register_</h5>
      <input type="text" v-model="username" placeholder="YOU-NAME">
      <input type="password" v-model="password" placeholder="YOU-PASSWORD">
      <input type="text" v-model="headerFile" placeholder="HEADERFILE">

      <button>READY...</button>
       <p>已有账号,去<span @click="toRegister()">登录</span></p>
    </form>

    <!-- <div ref="mask" class="mask">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
         <van-field
          v-model="headerFile"
          type="headerFile"
          name="headerFile"
          label="图片地址"
          placeholder="图片"
          :rules="[{ required: true, message: '图片地址' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >注册</van-button>
        </div>
      </van-form>
    </div> -->
  </div>
</template>

<script>
import { requestAddMy } from '@/api/My/'
//加密
import { sha256 } from 'js-sha256'
export default {
  data() {
    return {
      username: '',
      password: '',
      headerFile:'',
    };
  },
  methods: {
      toRegister:function(){
      this.$router.push('/login')
    },
       async onSubmit(values) {

        if(this.username==''||this.password==''){
          alert('账号密码必填哦~')
          return
        }

 let res= await requestAddMy(this.username,sha256(this.password) ,this.headerFile);
    let data=res.data;
   let { resultCode, resultInfo } = data;
   if(resultCode==1){
    this.userlist=resultInfo
    alert('注册成功')
       this.$router.push({path:'/login',})
   }
      console.log('submit', values);
    },
  },
};  
</script>

<style lang="scss" scoped>
.header{
  background: url('../../../../../assets/img/di.png') -295px 18px no-repeat;
  width: 100%;
  height: 100vh;
p{
  font-weight: 600;
  margin: auto;
  width: 150px;
  margin-top: 50px;
}
span{
  color: #dd2f22;
  font-weight: 600;

}
}
van-nav-bar{
  background-color: #f6f6f6 !important;
}
.van-nav-bar{
  margin-bottom: 30px;
}  
form{
  margin:50% auto;
  width: 300px;
  text-align: center;
  height: 400px;
  h5{
    font-weight: 600;
    color:black;
    font-size: 30px;
    margin-bottom: 40px;
  }
}
input{
  width: 300px;
  height: 70px;
  margin: auto;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  background-color: transparent;
  border-bottom: 1px solid rgb(114, 114, 114);
}
button{
  color: white;
  background-color: #dd2f22;
  width: 300px;
  margin-top: 60px;
  height: 60px;
  border: none;
}

</style>